<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>css3过渡</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <style>
        .demo {
            width: 360px;
            margin: 60px auto 10px auto
        }
        
        @media only screen and (min-width: 420px) {
            .demo {
                width: 800px;
                margin: 60px auto 10px auto
            }
        }
        
        .box {
            float: left;
            width: 380px;
            height: 260px
        }
        
        .clear {
            clear: both
        }
        
        .he_border1:hover .he_border1_img {
            opacity: 0.5;
            transform: scale(1.3);
            transition: all 0.5;
        }
        
        .he_border1:hover .he_border1_caption_p {
            opacity: 1;
            color: white;
            top: 110px;
        }
        
        .he_border1:hover .he_border1_caption::before,
        .he_border1:hover .he_border1_caption::after {
            opacity: 1;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1)
        }
        
        .he_border2:hover .he_border2_img {
            opacity: 0.5;
            transform: scale(1.3);
            transition: all 0.5;
        }
        
        .he_border2:hover .he_border2_caption_p {
            opacity: 1;
            color: white;
            top: 110px;
        }
        
        .he_border2:hover .he_border2_caption::before,
        .he_border2:hover .he_border2_caption::after {
            opacity: 1;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1)
        }
        
        .he_3DFlipX_inner:hover .he_3DFlipX_img {
            transform: rotateX(180deg)
        }
        
        .he_3DFlipX_inner:hover .he_3DFlipX_caption {
            opacity: 1;
            -webkit-transform: rotateX(0);
            -moz-transform: rotateX(0);
            transform: rotateX(0)
        }
        
        .he_3DFlipY_inner:hover .he_3DFlipY_img {
            transform: rotateY(180deg);
        }
        
        .he_3DFlipY_inner:hover .he_3DFlipY_caption {
            opacity: 1;
            -webkit-transform: rotateX(0);
            -moz-transform: rotateX(0);
            transform: rotateX(0)
        }
    </style>

</head>

<body>

    <div class="demo">

        <div class="box">
            <div class="he_border1">
                <img class="he_border1_img" src="images/pro_1.jpg" alt="Image 01">
                <div class="he_border1_caption">
                    <h3 class="he_border1_caption_h">过渡</h3>
                    <p class="he_border1_caption_p">过渡效果+演示+源码</p>
                    <a class="he_border1_caption_a" href="#"></a>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="he_border2">
                <img class="he_border2_img" src="images/pro_2.jpg" alt="Image 01">
                <div class="he_border2_caption">
                    <h3 class="he_border2_caption_h">过渡</h3>
                    <p class="he_border2_caption_p">过渡效果+演示+源码</p>
                    <a class="he_border2_caption_a" href="#"></a>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="he_3DFlipX">
                <div class="he_3DFlipX_inner">
                    <div class="he_3DFlipX_img">
                        <img src="images/pro_3.jpg" alt="img01">
                    </div>
                    <div class="he_3DFlipX_caption">
                        <h3>过渡</h3>
                        <p>过渡效果+演示+源码</p>
                    </div>
                    <a href="#"></a>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="he_3DFlipY">
                <div class="he_3DFlipY_inner">
                    <div class="he_3DFlipY_img">
                        <img src="images/pro_1.jpg" alt="img01">
                    </div>
                    <div class="he_3DFlipY_caption">
                        <h3>过渡</h3>
                        <p>过渡效果+演示+源码</p>
                    </div>
                    <a href="#"></a>
                </div>
            </div>
        </div>

        <div class="clear"></div>

    </div>


</body>

</html>